
<template>
    <div class="container block">
        <div class="topfilter">
            <div class="title">账单列表</div>
            <div class="flexcenter">
                <el-date-picker
                    @change="changeFilterDate"
                    v-model="filterDate"
                    type="month"
                    format="YYYY/MM"
                    value-format="YYYY-MM"
                    placeholder="请选择日期"
                />
                <el-button
                    style="marrgin-left: 10px !important;"
                    type="primary"
                    @click="onShowpopup"
                >导出</el-button>
            </div>
        </div>
        <div class="table">
            <el-table
                :data="tableData"
                style="width: 100%"
                :header-row-style="{ color: '#202536' }"
                :row-style="{ color: '#5E617D' }"
            >
                <el-table-column
                    align="center"
                    label="扣费日期"
                    prop="ensureDay"
                >
                </el-table-column>
                <el-table-column
                    align="center"
                    label="被保人"
                    prop="peopleCount"
                >
                </el-table-column>
                <el-table-column
                    align="center"
                    label="被派遣单位"
                    prop="severCompanyCount"
                >
                </el-table-column>
                <el-table-column
                    align="center"
                    label="总计"
                    prop="money"
                >
                </el-table-column>
            </el-table>
            <el-pagination
                class="pagination"
                v-model:currentPage="pageNum"
                v-model:page-size="pageSize"
                :page-sizes="[10, 30, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="getBongBillRecord"
            >
            </el-pagination>
        </div>
        <el-dialog
            v-model="isUp"
            width="450px"
            title="导出账单"
            center
        >
            <el-form
                :model="form"
                label-width="120px"
            >
                <el-form-item label="账单类型">
                    <el-select
                        @change="changeType"
                        v-model="form.type"
                        placeholder="账单类型"
                    >
                        <el-option
                            label="每月被保人员账单"
                            value="0"
                        />
                        <el-option
                            label="每日被保人员账单"
                            value="2"
                        />
                        <el-option
                            label="每日方案账单"
                            value="1"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="账单时间">
                    <el-date-picker
                        v-model="form.filterDate"
                        :type="form.type==='2'?'date':'month'"
                        :format="form.type==='2'?'YYYY/MM/DD':'YYYY/MM'"
                        :value-format="form.type==='2'?'YYYY-MM-DD':'YYYY-MM'"
                        placeholder="请选择账单时间"
                    />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="flexend">
                    <el-button
                        type=""
                        @click="onCancel"
                    >取消</el-button>
                    <el-button
                        type="primary"
                        @click="onSure"
                    >导出</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { BillDto } from "@/api/bill";
import {
    getEnsureCostListapi,
    insureDetailAllExport,
    exportperiodbill,
} from "@/api/long-insure";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";
export default defineComponent({
    name: "LontInsureBill",
    data() {
        return {
            form: {
                type: "",
                filterDate: "",
            },
            isUp: false,
            filterDate: "",
            pageSize: 10, // 每页显示十条
            pageNum: 1, // 页数为1
            total: 0, // 总的为0
            tableData: [] as BillDto[], // 如同BillDto的数据
        };
    },
    created() {
        this.filterDate = dayjs().format("YYYY-MM");
        // 创建
        this.getBongBillRecord();
    },
    methods: {
        changeType(e: any) {
            console.log(e);
            this.form.filterDate = "";
        },
        onCancel() {
            this.isUp = false;
            this.form.type = "";
            this.form.filterDate = "";
        },
        async onSure() {
            console.log(this.form.type);

            if (this.form.type === "" || this.form.type === null) {
                ElMessage({
                    message: "请选择账单类型",
                    type: "warning",
                });
            } else if (
                this.form.filterDate === "" ||
                this.form.filterDate === null
            ) {
                ElMessage({
                    message: "请选择账单时间",
                    type: "warning",
                });
            } else {
                if (this.form.type !== "2") {
                    let res = await insureDetailAllExport({
                        queryMonth: this.form.filterDate,
                        queryType: this.form.type,
                        companyPlanId: "",
                    });
                    console.log(res);
                    window.location.href =
                        process.env.VUE_APP_BASE_URL +
                        "/common/download?delete=true&fileName=" +
                        res;
                    this.$message.success("导出成功！");
                    this.isUp = false;
                } else {
                    let res = await exportperiodbill({
                        effectiveDate: this.form.filterDate,
                        companyPlanId: "",
                    });
                    window.location.href =
                        process.env.VUE_APP_BASE_URL +
                        "/common/download?delete=true&fileName=" +
                        res;
                    this.$message.success("导出成功！");
                    this.isUp = false;
                }
            }
        },
        changeFilterDate(e: any) {
            console.log(e);
            this.getBongBillRecord();
        },
        onShowpopup() {
            console.log(111);
            this.isUp = true;
            this.form.type = "";
            this.form.filterDate = "";
        },
        async getBongBillRecord() {
            const result = await getEnsureCostListapi({
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                queryMonth: this.filterDate,
            });
            console.log(result, "result");
            this.total = result.totalCount;
            this.tableData = result.list;
        },
        handleSizeChange() {
            this.pageNum = 1;
            this.getBongBillRecord();
        },
    },
});
</script>
<style lang="stylus" scoped>
table();

.topfilter {
    width: 100%;
    box-sizing: border-box;
    padding: 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title {
        font-size: 16px;
        font-weight: 600;
    }

    .flexcenter {
        display: flex;
        align-items: center;
        gap: 8px;
    }
}

.block {
    padding: 0px 24px;
}

:deep() .month-picker {
    position: relative;
    top: -10px;
    left: 0;
    margin-top: -10px;
    font-size: 15px;
}

.tab-img {
    width: 38px;
    height: 38px;
}

.flexend {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 50px;
}
</style>
